
<!DOCTYPE HTML>
<html>
    <head>
        <title>Youniversity</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        
        <link rel="stylesheet" href="style/style.css"/>
        <script src="js/lib/cordova-1.7.0.js"></script>
        <script src="js/lib/iscroll.js"></script>

        <script type="text/javascript">
            var pictureSource;   // picture source
            var destinationType; // sets the format of returned value 

            // PhoneGap is ready to be used!
            function onDeviceReady() {
                pictureSource=navigator.camera.PictureSourceType;
                destinationType=navigator.camera.DestinationType;
            }

            // Called when a photo is successfully retrieved
            function onPhotoDataSuccess(imageData) {
                var photo = document.getElementById('photo');
                photo.src = "data:image/jpeg;base64," + imageData;
            }

            // Called when a photo is successfully retrieved
            function onPhotoURISuccess(imageURI) {
                var photo = document.getElementById('photo');
                photo.background = imageURI;
            }

            function capturePhoto() {
                  // Take picture using device camera and retrieve image as base64-encoded string
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
            }

            function capturePhotoEdit() {
                // Take picture using device camera, allow edit, and retrieve image as base64-encoded string  
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); 
            }

            function getPhoto(source) {
                // Retrieve image file location from specified source
                navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
                destinationType: destinationType.FILE_URI,
                sourceType: source });
            }

            // Called if something bad happens.
            function onFail(message) {
                // alert('Failed because: ' + message);
            }




            var scrollableframe;
            function loaded() {
                // scrollableframe = new iScroll('scrollableframe',
                //                       { useTransition:false,
                //                         checkDOMChanges: true,
                //                         hideScrollbar: true,
                //                         fixedScrollbar:true,
                //                         bounceLock: true,
                //                         onBeforeScrollStart: function (e) {
                //                             var target = e.target;
                //                             while (target.nodeType != 1) target = target.parentNode;

                //                             if (target.tagName != 'SELECT' && target.tagName != 'OPTION' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'BUTTON')
                //                                 e.preventDefault();
                //                         } }
                //                     );

                $('.button')
                    .on('touchstart', function () {
                        $(this).addClass('fake-active');
                    })
                    .on('touchend', function() {
                        $(this).removeClass('fake-active');
                    })
                    .on('touchcancel', function() {
                        $(this).removeClass('fake-active');
                    });

                var allSelects = $('button');
                allSelects.each(function(index, item) {
                                  item.addEventListener('touchstart', function(e) { /*e.stopPropagation();*/ $(this).addClass("fake-active"); }, false);
                                  item.addEventListener('touchend', function(e) { $(this).removeClass("fake-active"); }, false);
                                  item.addEventListener('touchcancel', function(e) { $(this).removeClass("fake-active"); }, false);
                                });
            }

            //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', loaded, false);

            // Wait for PhoneGap to connect with the device
            document.addEventListener("deviceready",onDeviceReady,false);

        </script>

    </head>
    <body class="page">
        <nav>
            <ul>
                <li><a href="explore.html"><img src="resources/img/explore.png"></a></li>
                <li><a href="plan.html"><img src="resources/img/plan.png"></a></li>
                <li><a href="personal.html"><img src="resources/img/personal.png"></a></li>
                <li><a href="events.html"><img src="resources/img/events.png"></a></li>
                <li><a href="updates.html"><img src="resources/img/updates.png"></a></li>
            </ul>
        </nav>
        <header>Registrazione</header>

        <!-- <div id="scrollableframe">
            <div class="scroller"> -->
                <form>
                    <div class="frame">
                        <ul class="form">                            
                            <li>Foto<br>
                                <img id="photo" onclick="getPhoto(pictureSource.CAMERA);" src="resources/img/contactdefault.png"></img>
                            </li>
                            <div class="box">
                                <li>Nome<br><input type="text" /></li>
                                <li>Cognome<br><input type="text" /></li>
                                <li>Email<br><input type="email" /></li>
                                <li>Matricola<br><input type="number" /></li>
                                <li>Corso di Laurea<br><input type="text" /></li>
                            </div>
                            <div class="box">
                                <li>Password<br><input type="password" /></li>
                                <li>Ripeti Password<br><input type="password" /></li>
                            </div>
                            <div class="box">
                                <li>Telefono<br><input type="tel" /></li>
                                <li>Fax<br><input type="tel" /></li>
                                <li>www<br><input type="url" /></li>
                            </div>
                            <li>Ruolo<br>
                                <section class="radio-container">
                                    <div>
                                        <input id="radio-1" name="ruolo" type="radio" checked/>
                                        <label for="radio-1">Studente</label>
                                    </div>
                                    <div>
                                        <input id="radio-2" name="ruolo" type="radio" />
                                        <label for="radio-2">Professore</label>
                                    </div>
                                </section>
                            </li>
                            <!-- <li><input type="text" placeholder="Nome" /></li>
                            <li><input type="text" placeholder="Cognome" /></li>
                            <li><input type="email" placeholder="Email" /></li>
                            <li><input type="number" placeholder="Matricola" /></li>
                            <li><input type="password" placeholder="Password" /></li>
                            <li><input type="password" placeholder="Ripeti password" /></li>
                            <li><input type="text" placeholder="Corso di Laurea" /></li>
                            <li><input type="text" placeholder="Foto" /></li>
                            <li><input type="tel" placeholder="Telefono" /></li>
                            <li><input type="tel" placeholder="Fax" /></li>
                            <li><input type="url" placeholder="WWW" /></li>
                            <li><input type="text" placeholder="Ruolo" /></li> -->
                        </ul>
                    </div>
                    <div class="centercontent">
                        <button type="button">
                            <span class="icon tick"></span>
                            <span class="label">Registra</span>
                        </button>
                    </div>
                </form>


        <!--     </div>
        </div> -->

        <script src="js/lib/zepto.min.js"></script>
        <script src="js/ynv.js"></script>
    </body>
</html>